<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
	href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/system.css" />
<title>学生</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript"
	src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>

<body>
	<div class="all">
		<div class="tops">
			<h2>宿舍管理系统</h2>
		</div>
		<div class="row nav-ce">
			<div class="col-md-2">
				<div class="panel-group table-responsive" role="tablist">
					<div class="panel panel-primary leftMenu">
						<!-- 利用data-target指定要折叠的分组列表 -->
						<div class="panel-heading" id="collapseListGroupHeading1"
							data-toggle="collapse" data-target="#collapseListGroup1"
							role="tab">
							<h4 class="panel-title">
								首页 <span class="glyphicon glyphicon-chevron-right first"></span>
							</h4>
						</div>

						<!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
						<div id="collapseListGroup1" class="panel-collapse collapse in"
							role="tabpanel" aria-labelledby="collapseListGroupHeading1">
							<ul class="list-group">
								<li class="list-group-item"><a onclick="absenceManager()">缺勤记录</a><span
									class="glyphicon glyphicon-chevron-right gray"></span></li>
								<li class="list-group-item"><a onclick="updatePwd()">修改密码</a><span
									class="glyphicon glyphicon-chevron-right gray"></span></li>
								<li class="list-group-item"><a href="logSystem">退出系统</a><span
									class="glyphicon glyphicon-chevron-right gray"></span></li>
							</ul>
						</div>
					</div>
					<!--panel end-->
				</div>
			</div>
			<div class="col-md-10">
				<div class="wel allNav">
					<h1 class="welcome">欢迎你，${sessionScope.name }同学!</h1>
				</div>
				<div class="absenceManager allNav" style="display: none;">
					<div style="border: 1px #ddd solid; padding: 1em 0.5em;">
						<b>缺勤记录</b>
						<hr style="margin: 0.5em 0 0.3em 0;" />
						<div class="row tableTop">
							<div class="col-md-8"></div>
							<div class="col-md-4">
								<div class="row">
									<div class="col-md-4 search"></div>
									<div class="col-md-3 search">日期</div>
									<div class="col-md-3 search">
										<input type="text" class="form-control input-sm">
									</div>
									<div class="col-md-2 search">
										<a type="button" class="btn btn-info btn-sm">搜索</a>
									</div>
								</div>
							</div>
						</div>
						<div class="table-responsive">
							<table class="table table-bordered table-hover">
								<thead>
									<tr>
										<th>日期</th>
										<th>学号</th>
										<th>姓名</th>
										<th>宿舍楼</th>
										<th>寝室</th>
										<th>备注</th>
									</tr>
								</thead>
								<tbody id="absContent">

								</tbody>
							</table>
						</div>
						<div class="row">
							<div class="col-md-5"></div>
							<div class="col-md-7">
								<nav aria-label="Page navigation">
								<ul class="pagination">
									<li><a href="#"> 首页 </a></li>
									<li class="disabled"><a href="#" aria-label="Previous">上一页</a>
									</li>
									<li class="disabled"><a href="#">1</a></li>
									<li><a href="#">2</a></li>
									<li><a href="#" aria-label="Next">下一页</a></li>
									<li><a href="#">尾页</a></li>
								</ul>
								</nav>
							</div>
						</div>
					</div>
				</div>
				<div class="updatePwd allNav" style="display: none;">
					<b>修改密码</b>
					<hr style="margin: 0.5em 0 0.3em 0;" />
					<form class="form-horizontal">
						<div class="form-group">
							<label for="inputEmail3" class="col-sm-2 control-label">
								<font color="red">*</font>用户名
							</label>
							<div class="col-sm-3">
								<input type="email" class="form-control" name="uname">
							</div>
						</div>
						<div class="form-group">
							<label for="inputPassword3" class="col-sm-2 control-label">
								<font color="red">*</font>密码
							</label>
							<div class="col-sm-3">
								<input type="password" class="form-control" name="upwd">
							</div>
						</div>
						<div class="form-group">
							<label for="inputEmail3" class="col-sm-2 control-label">
								<font color="red">*</font>确认密码
							</label>
							<div class="col-sm-3">
								<input type="email" class="form-control" name="pwd2">
							</div>
						</div>
						<div class="form-group">
							<label for="inputEmail3" class="col-sm-2 control-label">
								<font color="red">*</font>姓名
							</label>
							<div class="col-sm-3">
								<input type="email" class="form-control" name="systemName">
							</div>
						</div>
						<div class="form-group">
							<label for="inputEmail3" class="col-sm-2 control-label">
								<font color="red">*</font>性别
							</label>
							<div class="col-sm-3">
								<select class="form-control">
									<option name="usex">男</option>
									<option name="usex">女</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label for="inputEmail3" class="col-sm-2 control-label">
								<font color="red">*</font>联系电话
							</label>
							<div class="col-sm-3">
								<input type="email" class="form-control" name="phone">
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="submit" class="btn btn-primary">提交</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript">
		//左侧导航点击隐藏别的显示当前的
		function wel() {
			$(".allNav").attr("style", "display: none;");
			$(".wel").attr("style", "display: block;");
		}

		function absenceManager() {
			$(".allNav").attr("style", "display: none;");
			$(".absenceManager").attr("style", "display: block;");
			$.ajax({
				type : "post",
				url : "selectAbs",
				data : "",
				dataType : "json",
				success : function(data) {
					/* alert(data); */
					var html = "";
					$.each($.parseJSON(data), function(i, item) {
						html += "<tr><td>" + item.absenceDate + "</td><td>"
								+ item.stuId + "</td><td>" + item.stuName
								+ "</td><td>" + item.dorm + "</td><td>"
								+ item.dormId + "</td><td>" + item.remark
								+ "</td></tr>";
					})
					$('#absContent').html(html);
				},
				error : function() {
					alert("失败！！！");
				}
			});
		}

		function updatePwd() {
			$(".allNav").attr("style", "display: none;");
			$(".updatePwd").attr("style", "display: block;");
		}
	</script>
</body>

</html>
